<template>
  <div class="repair_add">
    <div class="add_con">
      <div class="add_head">
        <div class="add_title">
          <span>物品维修、更换申请单</span>
        </div>
        <div class="add_info">
          <div class="info_radio">
            <el-radio-group v-model="applyType" @change="radioChange">
              <el-radio label="1">维修</el-radio>
              <el-radio label="2">更换</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="add_table" ref="add_table">
        <div class="add_tab">
          <table class="table">
            <tr class="tr_head">
              <th>申请部门</th>
              <td>{{ userInfo.loginPostInfo.orgName }}</td>
              <th>申请人</th>
              <td>{{ userInfo.userName }}</td>
              <th>申请时间</th>
              <td>{{ timeNow }}</td>
            </tr>
            <tr>
              <th>型号</th>
              <td class="board_td_l" colspan="6">
                <!-- <p class="pre_line" v-if="formData.isWrite == '0'" v-html="removeHtmlStyle(model)"></p> -->
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  v-model="model"
                  rows="4"
                  maxlength="100"
                  show-word-limit></el-input>
              </td>
            </tr>
            <tr>
              <th>事由</th>
              <td class="board_td_l" colspan="6">
                <!-- <p class="pre_line" v-if="formData.isWrite == '0'" v-html="removeHtmlStyle(reason)"></p> -->
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  v-model="reason"
                  rows="4"
                  maxlength="100"
                  show-word-limit></el-input>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="btn_save">
        <el-button class="btnBorder" @click="cancelData">取 消</el-button>
        <el-button class="btnBg" type="primary" @click="saveData()">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addRepair } from '@apis/api-dailyManage.js'
import moment from 'moment'
export default {
  components: {},
  props: {},
  watch: {},
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      applyType: '1',
      timeNow: moment().format('YYYY-MM-DD'),
      model: '',
      reason: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    radioChange() {
      console.log(this.applyType)
    },
    cancelData() {
      this.$emit('cancelData')
    },
    saveData(type) {
      if (this.reason.trim().length === 0) {
        this.$message.warning('请先填写事由后再提交')
        return
      }
      addRepair({
        model: this.model,
        orgId: this.userInfo.loginPostInfo.orgId,
        reason: this.reason,
        repairMonth: moment().format('M'),
        repairTitle: '物品维修、更换申请单',
        repairType: this.applyType,
        repairYear: moment().format('YYYY'),
        saveStatus: '1',
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功')
          this.$emit('addSuccess', 'add')
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
}
</script>

<style lang="scss" scoped>
.repair_add {
  width: 100%;
  height: 100%;
  font-size: 14px;
  .add_con {
    flex: 1;
    padding: 0 10px;
    .add_head {
      .add_title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        color: #333333;
      }
      .add_info {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 10px;
        .info_radio {
          text-align: right;
          .el-radio {
            margin-right: 20px;
            /deep/.el-radio__label {
              font-size: 18px;
            }
          }
        }
      }
    }
    .add_table {
      .add_tab {
        padding-top: 10px;
        .table {
          width: 100%;
          border-collapse: collapse;
          color: #606266;
          .tr_head {
            line-height: 32px;
            th,
            td {
              padding: 8px 0;
              font-size: 16px;
            }
          }
          .week_input {
            font-size: 15px;
            /deep/ .el-textarea__inner {
              line-height: 2;
            }
          }
          tr {
            border: 1px solid #b5b5b5;
            line-height: 28px;
            th {
              width: 16%;
              border: 1px solid #b5b5b5;
              text-align: center;
              padding: 0px 10px;
              font-size: 16px;
              font-weight: normal;
            }
            td {
              border: 1px solid #b5b5b5;
              text-align: center;
              padding: 5px 10px;
              width: 16%;
            }
            .no_data_sum {
              height: 120px;
            }
            .board_td_l {
              text-align: left;
            }
            .board_th_color {
              color: #a7a7a7;
            }
          }
          .week_input {
            /deep/ .el-textarea__inner {
              border: none;
              border-radius: 0;
              width: 100%;
            }
            /deep/.el-textarea__inner {
              border-radius: 0;
            }
            /deep/.el-input__inner {
              // background: #f5f6fa;
              border: none;
              border-radius: 0;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .btn_save {
    margin-top: 15px;
    text-align: center;
    padding-bottom: 10px;
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
</style>
